<template>
  <div class="approvalListSearch">
    <selector style="background: #fff;" v-if="$route.query.isApproval === '0'&&$route.query.type=='2'" :value-map="['id','nickName']" title="选择报销人" v-model="search" @on-change="getResult(1)" :options="expenseUserList"></selector>
    <x-input v-else="$route.query.isApproval === '0'&&$route.query.type=='2'"  class="weui-vcode" v-model="search" :show-clear="false" @on-enter="getResult" :placeholder="placeholder">
      <i slot="right" class="fa fa-search" @click="getResult"></i>
    </x-input>
    <group gutter='10px'>
      <cell
        :title="title"
        align-items="left">
        <span slot="icon" v-if="approval"><img style="height: 20px;margin-right: 10px"
                                               src="~assets/images3/icon-shenhe@3x.png"/></span>
        <span slot="icon" v-if="firstTrials"><img style="height: 20px;margin-right: 10px"
                                                  src="~assets/images3/icon-chushen@3x.png"/></span>
        <span slot="icon" v-if="secondTrials"><img style="height: 20px;margin-right: 10px"
                                                   src="~assets/images3/icon-fushen@3x.png"/></span>
        <span slot="after-title">({{list.length}})</span>
      </cell>
      <template>
        <cell class="sub-item" value-align="left" :key="item.no" v-for="(item,index) in list">
          <div slot="child" v-if="$route.query.isApproval === '0'"><span
            style="color:#43A2FE;font-size: 15px" @click="gotoApproval(item.id)">
           去审核</span>
          </div>
          <div slot="child" v-if="$route.query.isApproval === '1'"><span
            style="color:#43A2FE;font-size: 15px" @click="gotoApprovalDetail(item.id)">
           查看</span>
          </div>
          <p style="font-size: 15px">{{item.workOrderCode}}
            <span style="margin-left: 10px;font-size: 13px">{{_dateFormat(item.secondAuditTime||item.firstAuditTime||item.auditTime||item.createdTime)}}</span>
          </p>
          <p style="font-size: 15px">{{item.expenseUser&&item.expenseUser.nickName||item.requestUser&&item.requestUser.nickName}}</p>
        </cell>
      </template>
    </group>
  </div>
</template>

<script>
  import {
    Group,
    Cell,
    CellBox,
    XInput,
    Selector
  } from 'vux'

  export default {
    name: "approvalListSearch",
    components: {Group, Cell, CellBox, XInput,Selector},
    data() {
      return {
        placeholder: '请输入搜索条件',
        search: '',
        expenseUserList:[],
        list: []
      }
    },
    mounted() {
      this.getResult();
      if(this.$route.query.isApproval === '0'&&this.$route.query.type=='2'){
        this.getExpenseUserList();
      }
    },
    computed: {
      title() {
        if (this.$route.query.isApproval === '0') {
          switch (this.$route.query.type) {
            case '5' :
              return '费用审核';
            case '1' :
              return '初审';
            case '2' :
              return '复审';
          }
        } else if (this.$route.query.isApproval === '1') {
          switch (this.$route.query.type) {
            case '5' :
              return '费用审核';
            case '2' :
              return '初审';
            case '3' :
              return '复审';
          }
        }
      },
      approval() {
        return (this.$route.query.isApproval === '0' && this.$route.query.type ==='5')
          ||(this.$route.query.isApproval === '1' && this.$route.query.type ==='5')
      },
      firstTrials() {
        return (this.$route.query.isApproval === '0' && this.$route.query.type ==='1')
          ||(this.$route.query.isApproval === '1' && this.$route.query.type ==='2')
      },
      secondTrials() {
        return (this.$route.query.isApproval === '0' && this.$route.query.type ==='2')
          ||(this.$route.query.isApproval === '1' && this.$route.query.type ==='3')
      },
    },
    methods: {
      //获取公司人员列表
      getExpenseUserList(name){
        this.$http.get('/account/api/users', {params: {companyId:this.$store.state.user.userInfo.companyBean&&this.$store.state.user.userInfo.companyBean.id,
        noPage:true}}).then(res => {
            this.expenseUserList = res.data.data;
          }
        )
      },
      //查看审批详情界面
      gotoApprovalDetail(id){
        let name = ''
        switch (this.$route.query.type) {
          case '5' :
            name = 'CostApplyTrial';
            break;
          case '2' :
            name = 'CostSecondTrial';
            break;
          case '3' :
            name = 'CostSecondTrial';
            break;
        }
        this.$router.push({
          path:name,
          query:{id:id,type:1,auth:1}
        });
      },

      // 跳转初审界面
      gotoApproval(id){
        let name = ''
        switch (this.$route.query.type) {
          case '5' :
            name = 'CostApplyTrial';
            break;
          case '1' :
            name = 'CostFirstTrial';
            break;
          case '2' :
            name = 'CostSecondTrial';
            break;
        }
        this.$router.push({
          path:name,
          query:{id:id}
        });
      },
      //获取搜索结果
      getResult(index) {
        let params = index==1?{
          noPage: true,
          expenseUserId: this.search,}:{
          noPage: true,
          workOrderCode: this.search,
        };
        let url = '/expense/api/expenseForm';
        if (this.$route.query.isApproval === '0') {
          switch (this.$route.query.type) {
            case '5' :
              url = '/expense/api/RequestForm'
              params = {status:1,
                trialId:this.$store.state.user.userInfo.id,...params}
              break;
            case '1' :
              params = {status:1,
                firstTrialId:this.$store.state.user.userInfo.id,...params}
              break;
            case '2' :
              params = {status:2,
                secondTrialId:this.$store.state.user.userInfo.id,...params}
              break;
          }
        }else if (this.$route.query.isApproval === '1') {
          switch (this.$route.query.type) {
            case '5' :
              url = '/expense/api/RequestForm'
              params = {auditId:this.$store.state.user.userInfo.id,...params}
              break;
            case '2' :
              params = {firstAuditId:this.$store.state.user.userInfo.id,...params}
              break;
            case '3' :
              params = {secondAuditId:this.$store.state.user.userInfo.id,...params}
              break;
          }
        }
        this.$http.get(url, {params: params}).then(res => {
            this.list = res.data.data;
            //已审核申请单单独处理
            if(this.$route.query.type == '5' &&this.$route.query.isApproval == '1'){
              this.list = res.data.data.filter(item=>{
                return item.status ==2 || item.status ==3
              })
            }
          }
        )
      },
    }
  }
</script>

<style lang="less">
  .approvalListSearch {
    .weui-vcode {
      background: #fff;
      .weui-cell__bd {
        padding-right: 10px;
        > input {
          border-right: 1px solid gainsboro;
        }
      }
      .fa-search {
        font-size: 0.18rem;
        color: #3FBCFC;
      }
    }
  }

  .titleIcon {
    display: inline-block;
    line-height: 13px;
    margin-right: 10px;
    border: 3px solid #9FCBBE;
    color: #9FCBBE;
    border-radius: 50%;
    padding: 3px;
    width: 26px;
    height: 26px;
    font-size: 12px;
  }
</style>
